<template>
  <div>
    <!-- 匿名插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <slot name='title'></slot>

    <!-- 作用域插槽 -->
    <slot name="footer" :scope="state"></slot>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
let state = reactive({
  name: '张三',
  age: '25岁'
})

</script>
<style scoped lang ='less'>
</style>